.Engineering {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden; /* 隐藏滚动条 */
}


@media (max-width: 1200px) {
    .Engineering-left, .Engineering-center, .Engineering-right {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    .Engineering-left, .Engineering-center, .Engineering-right {
        flex: 1 1 100%;
    }
}

.Engineering-left {
    width: 25%;
    height: 100%;
    display: flex;
    //! 纵向对齐
    flex-direction: column;
    justify-content: space-around;

    .Engineering-left-top {
        width: 100%;
        height: 25%;

        p {
            text-align: center;
            color: white;
        }

        .item-header {
            width: 100%;
            height: 30px;
            line-height: 30px;
            background-color: #133a75;
            border-radius: 3px;
            color: white;
            display: flex;
            justify-content: space-around;
        }

        .item-title {
            display: flex;
            justify-content: space-around;
            color: white;
            margin: 5px 0;

            span {
                width: 33%;
                text-align: center;
            }
        }

        .item {
            display: flex;
            justify-content: space-around;
            color: white;
            background-color: #133872;
            border-radius: 3px;
            margin-bottom: 3px;

            span {
                width: 33%;
                text-align: center;
            }
        }
    }

    .Engineering-left-middle {
        width: 100%;
        height: 30%;

        p {
            margin-top: 20px;
            text-align: center;
            color: white;
        }

        .echarts-one {
            width: 100%;
            height: calc(100% - 14px);
            position: relative;
        }
    }

    .Engineering-left-bottom {
        width: 100%;
        height: 30%;

        p {
            text-align: center;
            color: white;
        }

        .echarts-two {
            width: 100%;
            height: calc(100% - 14px);
        }
    }
}

.Engineering-right {
    width: 25%;
    height: 100%;

    .Engineering-right-top {
        width: 100%;
        height: 30%;

        p {
            text-align: center;
            color: #fff;
            margin: 0;
            line-height: 38px;
        }

        .Engineering-right-top-echarts {
            display: flex;
            height: calc(100% - 38px);
            width: 100%;

            p {
                margin: 0;
            }

            .Engineering-right-top-Three {
                width: 45%;
                height: 100%;
            }

            .Engineering-right-top-Four {
                width: 55%;
                height: 100%;
            }
        }
    }

    .Engineering-right-middle {
        width: 100%;
        height: 30%;

        p {
            text-align: center;
            color: #fff;
            margin-top: 5px;
        }

        .listTwo {
            width: 20%;
            background-color: #a4adb3;
            height: 20px;
            border-radius: 3px;
            display: flex;
            float: right;

            .box1 {
                width: 50%;
                height: 100%;
                border-radius: 3px;
                color: #fff;
                line-height: 20px;
                text-align: center;
                font-size: 12px;
                transition: background-color 0.3s ease, transform 0.3s ease;
            }

            .box2 {
                width: 50%;
                height: 100%;
                color: #fff;
                border-radius: 3px;
                line-height: 20px;
                text-align: center;
                font-size: 12px;
                transition: background-color 0.3s ease, transform 0.3s ease;
            }

            .active {
                background-color: #2578f2;
            }
        }
    }

    .Engineering-right-bottom {
        width: 100%;
        height: 30%;

        p {
            text-align: center;
            color: #fff;
        }

        .box{
            width: 100%;
            height: calc(100% - 38px);
            position: relative;
            .box-left{
                position: absolute;
                left: 5%;
                top: 17%;
            }
            .box-right{
                width: 70%;
                position: relative;
                left: 30%;
                overflow: hidden; /* 隐藏溢出内容 */
                text-overflow: ellipsis; /* 使用省略号表示溢出内容 */
                white-space: nowrap; /* 禁止换行 */
                p{
                    color: yellow;
                    text-align: left;
                    overflow-y: auto; /* 允许竖向滚动 */
                    white-space: normal; /* 允许换行 */
                    max-height: 100px; /* 设置最大高度 */
                    position: relative;
                    scrollbar-width: thin; /* Firefox */
                    scrollbar-color: transparent transparent; /* Firefox */
                }
                p::-webkit-scrollbar {
                    width: 6px; /* 设置滚动条宽度 */
                }
                p::-webkit-scrollbar-track {
                    background: transparent; /* 滚动条轨道背景色 */
                }
                p::-webkit-scrollbar-thumb {
                    background-color: rgba(0, 0, 0, 0.2); /* 滚动条颜色 */
                    border-radius: 10px; /* 滚动条圆角 */
                }
                span{
                    color: yellow;
                }
            }
        }
    }
}

.Engineering-center {
    width: 50%;
    height: 100%;
    padding: 10px;
}